<template>
    <div class="dashboard-container">
        <el-form ref="form" :model="temp" :rules="rules">
            <!-- 枚举公共头 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="枚举名称" prop="name">
                        <el-input v-model="temp.name" placeholder="请输入枚举名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-button type="primary" @click="handleAdd"><i class="el-icon-plus"></i>新增适用类型</el-button>
            <el-table :data="temp.usages" style="margin-bottom: 15px;">
                <el-table-column prop="objectTypeName" label="对象"></el-table-column>
                <el-table-column prop="propertyTypeName" label="资产类型"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row, $index}">
                        <el-button type="text" style="color: red;" @click="handleDelete($index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 操作按钮 -->
            <div>
                <el-button type="primary" @click="hanldeSubmit('form')">确定</el-button>
                <el-button type="primary" plain @click="handleBack">返回</el-button>
            </div>
        </el-form>

        <!-- 新增弹窗 -->
         <el-dialog 
            title="新增使用类型" 
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="dialogVisible=false" 
            width="600px"
        >
            <!-- <el-tag type="warning" style="margin-bottom: 10px;">案例和评估对象可选择资产类型</el-tag> -->
            <el-form >
                <el-form-item label="对象">
                    <el-select v-model="addTemp.objectType" style="width: 100%;">
                        <el-option v-for="item in OBJECT_TYPE_LIST" :label="item.label" :value="item.value" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产类型" v-if="addTemp.objectType==3||addTemp.objectType==8">
                    <el-select v-model="addTemp.propertyType" style="width: 100%;" multiple>
                        <el-option v-for="item in TARGET_TYPE_LIST" :label="item.label" :value="item.value" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="opt_btn" style="padding-top: 30px;" >
                <el-button type="primary" @click="submitAdd">提交</el-button>
                <el-button type="primary" @click="dialogVisible=false" plain>取消</el-button>
            </div>
         </el-dialog>

    </div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import { enumInfo, enumUpdate, enumCreate } from '@/api/enum'
import { transfromData } from '@/utils/tools'
import { TARGET_TYPE_LIST, OBJECT_TYPE_LIST } from '@/utils/common'
   
export default {
    name: 'StaffEnumAdd',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        OBJECT_TYPE_LIST,
        TARGET_TYPE_LIST,
        id: '',
        temp: {
            name: '',
            usages: []
        },
        addTemp: {
            objectType: '',
            propertyType: []
        },
        dialogVisible: false, 
        dialogType: 'create',
        rules: {
            name: [{ required: true, message: '请输入枚举名称', trigger: 'blur' }],
        }
      }
    },
    mounted(){
        this.id = this.$router.history.current.query.id;
        if(this.id){
            this.getInfo();
        }
    },
  
    methods:{
        // 点击删除
        handleDelete(index){
            this.temp.usages.splice(index, 1)
        },
        //获取详情
        async getInfo(){
            let data = await enumInfo({ id: this.id })
            data.usages = data.usages.map(item=>{
                item.objectTypeName = transfromData(OBJECT_TYPE_LIST, item.objectType)
                item.propertyTypeName = transfromData(TARGET_TYPE_LIST, item.propertyType)
                return item;
            })
            this.temp = data;
        },
        handleAdd(){
            this.addTemp = {
                objectType: '',
                propertyType: []
            }
            this.dialogVisible = true;
            
        },
        //提交添加类型
        submitAdd(){
            if(!this.addTemp.objectType){
                this.$message.error('必须要选择一个对象')
                return;
            }
            if(this.addTemp.objectType==3||this.addTemp.objectType==8){
                // 如果是案例和评估对象
                this.addTemp.propertyType.forEach(item=>{
                    this.removueRepeat(this.addTemp.objectType, item)
                })
            }else{
                this.removueRepeat(this.addTemp.objectType, '')
            }
            this.dialogVisible = false;
        },
        //去重添加
        removueRepeat(objectType, propertyType){
            //当遇到重复的情况就退出
            if(this.temp.usages.filter(item=>item.objectType==objectType&&item.propertyType==propertyType).length>0)return;
            let objectTypeName = transfromData(OBJECT_TYPE_LIST, objectType)
            let propertyTypeName = transfromData(TARGET_TYPE_LIST, propertyType)
            this.temp.usages.push({ objectType, propertyType, objectTypeName, propertyTypeName })
        },
        // 提交修改
        async hanldeSubmit(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let temp = JSON.parse(JSON.stringify(this.temp));
                    if(this.id){
                        let { id, name, usages } = temp;
                        await enumUpdate({ id, name, usages })
                        this.$message.success({ message: '修改成功' })
                        this.handleBack();
                    }else{ 
                        await enumCreate(temp)
                        this.$message.success({ message: '创建成功' })
                        this.handleBack();
                    }
                }else {
                    console.log('error submit!!');
                    return false;
                }
            })
            
        },
        handleBack(){
            this.$router.history.push({ path: '/data/enum' });
        }
    }
}
</script>
  
<style lang="scss" scoped>
.dashboard {
    &-container {
      margin: 30px;
      position: relative;
      .right{
        position: absolute;
        right: 0;
        top: 0;
      }

      .page{
        padding: 20px 0;
        text-align: center;
      }
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
}
</style>
  